<template>
    <div class="power">
        <div class="table_search mt-20">
            <a-card title="搜索" style="width: 100%">
                <div class="search_item">
                    <label class="text">姓名:</label>
                    <a-input placeholder="请输入姓名" />
                </div>
                <div class="search_item">
                    <label class="text">电话:</label>
                    <a-input placeholder="请输入电话" />
                </div>
                <div class="search_item">
                    <label class="text">ID:</label>
                    <a-input placeholder="请输入id" />
                </div>
                <div class="search_item">
                    <label class="text">职务:</label>
                    <a-input placeholder="请输入职位" />
                </div>
                <div class="search_item">
                    <label class="text">性别:</label>
                    <a-input placeholder="请选择性别" />
                </div>
                <div class="search_item">
                    <a-button type="primary">查询</a-button>
                    <a-button class="ml-10">重置</a-button>
                </div>
            </a-card>
        </div>
        <div class="table_main mt-20">
            <a-card title="人员表" style="width: 100%">
                <a-table :columns="columns" :dataSource="dataSource" class="w-100">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'job'">
                            <a-select style="width: 120px" @change="handleChange" v-model:value="record.job" :disabled="record.disabled">
                                <a-select-option v-for="item in ['admin', 'editor']" :key="item">{{ item }}</a-select-option>
                            </a-select>
                        </template>
                        <template v-else-if="column.key === 'action'">
                            <a v-if="record.disabled == true" @click="record.disabled = false">修改</a>
                            <a v-else @click="record.disabled = true; edit(record)">完成</a>
                            <a-divider type="vertical"/>
                            <a @click="del(record.id)">删除</a>
                        </template>
                        <template v-else-if="column.key === 'baseWage'">
                            <a-input v-if="record.disabled == false" v-model:value="queryParam.baseWage"></a-input>
                            <p v-else>{{ record.baseWage }}</p>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { onMounted, reactive, ref } from '@vue/runtime-core';
import  { powerList, powerEdit, powerDel } from '@/api/power/index.js'

const columns = [{
  title: 'ID',
  dataIndex: 'id',
}, {
  title: '姓名',
  dataIndex: 'name'
}, {
  title: '年龄',
  dataIndex: 'age'
}, {
  title: '权限',
  dataIndex: 'job',
  key: 'job'
}, {
  title: '部门',
  dataIndex: 'dept'
}, {
  title: '入职时间',
  dataIndex: 'upDataTime'
}, {
  title: '基础薪资',
  dataIndex: 'baseWage',
  key: 'baseWage'
}, {
  title: '操作',
  dataIndex: 'action',
  key: 'action'
}];
export default defineComponent({
    setup() {
        onMounted(() => {
            getPowerList()
        })
        const dataSource = reactive([])
        const queryParam = reactive({})
        const jobName = ref('')
        const getPowerList = () => {
            powerList().then(res => {
                res.data.result.forEach(item => {
                    item.disabled = true
                    dataSource.push(item)
                })
            })
        }
        const handleChange = e => {
            queryParam.job = e
        }
        const edit = para => {
            queryParam.id = para.id
            powerEdit(queryParam).then(() => {
                dataSource.length = 0
                getPowerList()
                queryParam.job = ''
            })
        }
        const del = id => {
            powerDel(id).then(() => {
                dataSource.length = 0
                getPowerList()
            })
        }
        
        return {
            columns,
            dataSource,
            handleChange,
            edit,
            del,
            queryParam,
            jobName
        }
    },
})
</script>
<style lang="scss" scoped>
.power {
    width: 100%;
}
.search_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
}
.text {
    width: 45px;
}
.power ::v-deep .ant-card-body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>
